import React from 'react'
import {NavLink} from 'react-router-dom'
import { connect } from 'react-redux'
import classnames from 'classnames'

const mapStateToProps = (state) => {
  return {
    currentGame: state.group.chooseCreateGame
  }
}
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    chooseCreateGame: (msg) => dispatch(global.allActions.groupActions.chooseCreateGame(msg)),
    ruleConfClicked: (index, value) => dispatch(global.allActions.groupActions.ruleConfClicked({index, value})),
    createGame: (alias) => dispatch(global.allActions.groupActions.createGame(alias))  
  }
}
class ConfigBase extends React.Component<any, any> {
  public constructor(props) {
    super(props)
    this.state = {
      gameAlias: ''
    }
  }
  
  public componentDidMount() {
  }

  public componentWillUnmount() {
    this.props.chooseCreateGame()
  }

  gameAliasChange(e) {
    this.setState({gameAlias: _.trim(e.target.value)})
  }

  public render() {
    const {currentGame, createGame, ruleConfClicked} = this.props
    const {gameAlias} = this.state
    const circleCn = classnames({
      'choose-circle-small': currentGame.config.length >= 7,
      'choose-circle': currentGame.config.length < 7
    })
    return ( 
      <div className="rule-game-base">
        <div className="pure-g rule-alias v-center">
          <div className="pure-u-7-24">
            <span>玩法别名</span>
          </div>
          <div className="pure-u-17-24">
            <input type="text" value={gameAlias} onChange={this.gameAliasChange.bind(this)}></input>
          </div>
        </div>
        <div className="rule-game-base-selections">
          {
            currentGame.config.map((cData, index) => {
              if (cData._visible === false) {
                return
              } 
              const rowCn = classnames({ 'rule-row': true, 'pure-g': true,
               'large-gap': currentGame.config.length <= 5, 'a-block': index === 0, 'b-block': index === 1, 'c-block': index === currentGame.config.length - 1 })
              const half = cData.choice.some(choice => choice.label.length >= 10)
              const halfRulename = cData.name.length >= 6
              const choiceCn = classnames({ 'pure-u-17-24': true, 'pure-g': true, 'choice': true, 'half-font': half })
              const ruleCn = classnames({ 'orange-v2': true, 'rule-name': true, 'half-font': halfRulename})
              const isMulti = cData.muti
              return <div className={rowCn} key={index}>
                <div className="pure-u-7-24">
                  <span className={ruleCn}>{cData.name}</span>
                </div>
                <div className={choiceCn}>
                  {
                    cData.choice.map((choice, choiceInd) => {
                      const selected = cData.selected.some(select => select === choice.value)
                      var imgSrc
                      if (isMulti) {
                        imgSrc = selected ? 'img/groupNew/multi-active.png' : 'img/groupNew/multi-default.png'
                      } else {
                        imgSrc = selected ? 'img/groupNew/single-active.png' : 'img/groupNew/single-default.png'
                      }
                      const textCn = classnames({ 'choose-text': true, 'orange-v2': selected })

                      // 如果是turns
                      var append = ''
                      if (cData.key === 'turns') {
                        const payTypeChoice = currentGame.config.find(con => con.name === '支付方式')
                        const showPay = currentGame.payTypeInfo.find(info => info.value === payTypeChoice.selected[0])
                        if (showPay) {
                          const showData = showPay.choice.find(show => show.id === choice.value)
                          append = showData.data
                        }
                      }

                      return <div className="pure-u-1-2" key={choiceInd} onClick={ruleConfClicked.bind(this, index, choice.value)}>
                        <img src={imgSrc} className={circleCn} alt="" />
                        <span className={textCn}>{choice.label + append}</span>
                      </div>
                    })
                  }
                </div>
              </div>
            })
          }
          <div  onClick={() => createGame(gameAlias)} className="confirm-mask" >
          	<div></div>
          	<img className="confirm-rule-config" src="img/groupNew/confirm-setting.png" alt="" />
        </div>
        </div>
      </div>
    )
  }

}

export default connect(mapStateToProps, mapDispatchToProps)(ConfigBase)